<template>
    <div class="table_container role-page">
       
       <!-- // 头部搜索栏 -->
        <header-search >
             
                <el-form-item label="代理等级" class="form-item-business">
                  <el-select
                    class="goods-business goods-input"
                    v-model="searchData.hcLevel"
                    placeholder="全部"
                    :clearable="true"
                  >
                    <el-option
                      v-for="item in agentOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item :label="$t('table.accountName')">
                    <el-input class="goods-id goods-input" v-model="searchData.account" :placeholder="$t('form.accountName')" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click='queryList("search")'>搜索</el-button>
                </el-form-item>

            
        </header-search>
            
        <!-- // 表格栏 -->
        <section class='table-box'>
            <div class="table-top" style='line-height: 24px; margin-bottom: 20px; margin-top: 10px;'></div>
            <tables :customerField='customerField'>
                <el-table-column
                        slot="right"
                        :label="$t('table.handle')"
                        align="center"
                        fixed="right"
                        width="260">
                    <template slot-scope="scope" class="smallIcon">
                        <el-tooltip :content="$t('table.edit')" placement="top">
                            <el-button type="mini"  @click="updateAndAdd(scope, 'look')">{{ $t('table.edit') }}</el-button>
                        </el-tooltip>
                        <el-tooltip :content="$t('table.delete')" placement="top" >
                            <el-button type="mini"  @click="updateAndAdd(scope, 'update')">{{ $t('table.delete') }}</el-button>
                        </el-tooltip>
                        <el-tooltip :content="$t('table.modifyPsd')" placement="top">
                            <el-button type="mini"  @click="updateAndAdd(scope, 'update')">{{ $t('table.modifyPsd') }}</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </tables>   
            <table-page :total='total' @handlepageChange='_handlepageChange' :currentPage="searchData.page" :pageSize="searchData.pageSize"></table-page>
        </section>

    </div>
</template>

<script>
   
    import * as api from '@/api'
    import headerSearch from '@/components/header_search';
    import tables from "@/components/table";
    import tablePage from "@/components/table_page";

    const { operateSystemMng: http } = api

    export default {
        data(){
            return {
                total: 0,
                searchData: {
                    hcLevel: '',
                    account:'',
                    page: 1,
                    pageSize: 20
                },
                startDate:'',
                endDate: '',
                formModel: {
                    cc: ''
                },
                agentOption: [],
                customerField: { // 自定义表格字段
                    tableData: [],
                    loading: false,
                    allField: [
                        {
                            property: 'accountID',
                            label: this.$t('table.accountID')
                        },
                        {
                            property: 'accountName',
                            label: this.$t('table.accountName')
                        },
                        {
                            property: 'role',
                            label: this.$t('table.role'),
                        }
                    ]
                },
                startDateOption: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                endDateOption: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            
                

            }
        },
        components: {
            headerSearch,
            tables,
            tablePage
        },
        created(){
          // this.queryList()
          this.customerField.tableData = [
              { accountID: 123, accountName: '马云', role: '管理员'}
          ]
         
        },
        watch: {
            ['dialogData.dialogVisible'] (val) {
                if (!val) {
                    this.$refs['formModel'].resetFields() // 重置表单及移除验证
                }
            }
        },
        computed: {
        },

        methods: {
             handleStartDate(value) {
                 
                this.searchData.startYearMonth = value? value.substr(0,7):'';
            },
            handleEndDate(value) {
                this.searchData.endYearMonth = value ? value.substr(0,7):'';
            },
            // 翻页
            _handlepageChange(val, flag) {
                let arr = []
                if (flag === 'changePage') {
                    this.searchData.page = val
                    this.queryList()
                } else {
                arr.push(val)
                    this.searchData.page = 1
                    this.searchData.pageSize = arr[0]
                    this.queryList()
                }

            },
            // 获取表格数据
            queryList(params){
                this.customerField.loading = true
                params === 'search' ? this.searchData.page = 1 : ''
                // api.acvmInviteList( this.searchData, ( result ) => {
                //     setTimeout(()=>this.customerField.loading = false, 0)
                //     this.total = result.data.listCount
                    
                //     this.customerField.tableData = result.data.list.length > 0 ? result.data.list.map((item, index) => {
                //       item.hcLevel = com.formatter(this.agentOption, item.hcLevel)
                //       return item
                //     }) : []

                // }, ( error ) => {
                //     this.customerField.loading = false
                //     this.$message({
                //         type: 'info',
                //         message: error.msg
                //     })
                // })
            },
            // 打开弹窗 
            openModel() {
                this.dialogData.dialogVisible = true
            },
            // 申请置换
            apply() {
               this.dialogData.dialogVisible = false
            },
            submitForm(val) {
               this.$refs['formModel'].validate((valid) => {
                    if (valid) {
                        this.apply()
                    }
                })
            }


        }
   
    }
</script>



<style lang="scss">
    .role-page {
        .header_top {
            border-bottom: 1px solid $borderColor;
            padding-bottom: 15px;
            margin-bottom: 10px;
            .header_top-left {
                line-height: 36px;
            }
            button {
                font-size: 12px;
            }
        }
    }
</style>